import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { MenuModel } from '../models/MenuModel';

/**
 * 左侧菜单组件
 */
@Component({
  selector: 'app-sidebar-menu',
  template: `
  <div class="c-nav" c-custom-scrollbar>
    <ul  class="c-sidebar-menu" *ngIf="menuData">
        <li  *ngFor="let item of menuData">
            <a  (click)="itemClicked(item);">
              <i style="margin-top:3px;width:17px" class="fa  pull-right"
                [ngClass]="{'fa-angle-down': !isLeaf(item) && item.isExpend, 'fa-angle-left': !isLeaf(item) && !item.isExpend}"></i>
              <i class="fa " [ngClass]="item.menuIcon"></i> <span>{{item.menuName}}</span>
              </a>
            <app-treeview-menu [data]="item"></app-treeview-menu>
        </li>
    </ul>
  </div>
  `
})

export class SidebarMenuComponent implements OnChanges, OnInit {

  // 输入数据
  @Input() data: Array<MenuModel>;

  menuData: Array<MenuModel>;

  // 搜索文本
  searchTxt= '';

  // 搜索隐藏
  searchMsgHidden= true;

  /**
   * 构造方法
   */
  constructor() {}

  /**
   * 初始化
   */
  ngOnInit() {
    this.menuData = this.data;
  }

  ngOnChanges() {
      this.menuData = this.data;
      console.log(this.data);
  }

  /**
   * 是否有子节点
   * @param item
   */
  isLeaf(item: MenuModel) {
     return !item.children || !item.children.length;
  }

   /**
    * 点击
    * @param item
    */
   itemClicked(item: MenuModel) {
     if (!this.isLeaf(item)) {
        for (const obj of this.menuData){
          if (obj.id !== item.id) {
              obj.isExpend = false;
          }
        }
        item.isExpend = !item.isExpend;
    }
  }

  /**
   * 查询菜单
   */
  searchMenu() {
    const tempData = this.menuData;
    this.searchTxt = this.searchTxt.trim();
    this.searchMsgHidden = true;

    if ('' !== this.searchTxt) {
       const keyWord = new RegExp(this.searchTxt);
       const menuList = new Array<MenuModel>();
       const menuIdList = new Array<number>();

       for (const item of tempData){
         this.searchItem(item, menuList, menuIdList, keyWord);
       }
       if (menuList.length > 0) {
          this.menuData = menuList;
       }else {
          this.searchMsgHidden = false;
       }

    }else {

    }
  }

  /**
   * 查询子菜单
   * @param item
   * @param menuList
   */
  searchItem(item: MenuModel, menuList: Array<MenuModel>, menuIdList: Array<number>, keyWord: RegExp) {
       item.isExpend = false;
       // 关键字匹配，并且不在列表中的
       if ((item.menuName.match(keyWord) || item.menuName.match(keyWord)) && !this.checkSearchMenuIdExists(item.id, menuIdList)) {
            menuList.push(item);
            this.pushSearchMenu(item, menuIdList);
       }

       // 存在子菜单的，递归子菜单
       const itemChildren = item.children;
       if (itemChildren && itemChildren.length > 0) {
           for (const subItem of itemChildren){
              this.searchItem(subItem, menuList, menuIdList, keyWord);
           }
       }

  }

  /**
   * 添加查询的菜单
   * @param item
   * @param menuIdList
   */
  pushSearchMenu(item: MenuModel, menuIdList: Array<number>) {
       menuIdList.push(item.id);
       const itemChildren = item.children;
       if (itemChildren && itemChildren.length > 0) {
          for (const subItem of itemChildren){
             this.pushSearchMenu(subItem, menuIdList);
          }
       }
  }

  /**
   *
   * @param id 检查菜单id是否存在
   * @param menuIdList
   */
  checkSearchMenuIdExists(id, menuIdList: Array<number>) {
      for (const menuId of menuIdList){
         if (menuId === id) {
            return true;
         }
      }

      return false;
  }

  /**
   * 查询输入
   * @param event
   */
  inputSearchTxt(event) {
      this.searchTxt = event.target.value;
  }



}
